<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>心</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color:#e4393c;
                /*外边距 自适应居中*/
                margin: 200px auto;
                transform:rotate(135deg);
                /*透明度：属性值范围值0-1*/
                opacity: .7;
                /*滤镜属性：下阴影 产生光晕效果
                       drop-shadow(x轴y轴 模糊距离 模糊颜色)
                */
                filter: drop-shadow(0 0 100px #e4393c);
                /*动画 复合属性 2.启动动画*/
                animation: heart .5s linear infinite;
                /*     关键帧名称 过渡时间 过渡方式 动画次数*/
            }
            /*
            * CSS3基础语法：选择器：抓取页面上元素添加效果
            * ③伪类选择器：给元素添加附加效果
            * 语法：选择器：hover 当鼠标悬停时给元素添加效果
            *      选择器：before 在元素之前生成内容，通常与content属性使用
            *      选择器：after 在元素之后生成内容，通常与content属性使用
            */
             /*需求：心【四方块】上生成内容*/
             
            div:before{
                content:"";
                /*CSS属性：显示属性
                display:block;转换成块元素
                display:inline;转换成行元素
                display:none;元素消失
                */
                display: block;
                /*画圆：1.空间 2.边框/背景填充 3.倒角*/
                width:200px;
                height:200px;
                background-color:#e4393c;
                border-radius:50%;
                /*相对定位*/
                position: relative;
                left: -100px;
            }
            div:after{
                content: "";
                display: block;
                width: 200px;
                height: 200px;
                background-color:#e4393c;
                border-radius: 50%;
                /*相对定位*/
                position: relative;
                top: -100px;
            }
            /*动画：1.创建关键帧*/
            @keyframes heart{
            0%{/*scale(1)等比例*/
                /*转换属性[复合属性]：旋转 缩放 平移*/
            transform:rotate(135deg)scale(1) ;    
            }
            30%{/*scale(.8)缩小*/
            transform:rotate(135deg) scale(.8);    
            }
            100%{/*scale(1.2)缩大*/
            transform:rotate(135deg) scale(1.6);    
            }
            }
        </style>
    </head>
    <body>
        <!--心 思路：设置一个div 产生两个圆:伪类选择器
            html    元素分类：所有元素明确种类
                    块元素：可以设置高宽，独占一行，典型div  
                    行元素：不可以设置高宽，在一行内显示，典型span
                    *文本就是行元素
                    行内块元素：可以设置高宽，在一行内显示，典型   
        -->
        <div></div>
    </body>
</html>